<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
    <div class="mainClass">
        <el-row class="row-class" type="flex" align="middle" v-if="showType=='list'">
            客户变更:在此节点你可以发起客户变更申请，进行客户信息的变更维护。
        </el-row>

        <!-- 列表界面 -->
        <div v-show="showType==='list'">
            <ft-tabs v-model="activeName" @tab-click="tabClick" type="border-card">
                <ft-tab-pane label="已发起流程" name="firstTabPane"/>
                <ft-tab-pane label="未发起流程" name="secondTabPane"/>
                <customer-change-list ref="customerChangeListRef"
                                      :activeName="this.activeName"
                                      @changeToDetail="changeToDetail"
                                      @add="addCustomerChange">
                </customer-change-list>
            </ft-tabs>
        </div>
        <!-- 卡片界面 -->
        <div v-if="showType==='card'">
            <div v-if="customerType === 'PERSONAL'">
                <customer-person-change-form :customer-id="customerId"
                                             :task-id="taskId"
                                             :editable="editable"
                                             @changeToList="changeToList">
                </customer-person-change-form>
            </div>
            <div v-else>
                <customer-corp-change-form :customer-id="customerId"
                                           :task-id="taskId"
                                           :editable="editable"
                                           @changeToList="changeToList">
                </customer-corp-change-form>
            </div>
        </div>
        <!-- 新增dialog -->
        <customer-change-select-dialog :show-dialog="showCustomerAddDialog"
                                       ref="customerChangeSelectDialogRef"
                                       @closeDialog="closeDialog"
                                       @changeToDetail="changeToDetail">
        </customer-change-select-dialog>
    </div>
</template>

<script>
    import CustomerChangeSelectDialog from './CustomerChangeSelectDialog'
    import CustomerChangeList from './CustomerChangeList'
    import CustomerCorpChangeForm from './CustomerCorpChangeForm'
    import CustomerPersonChangeForm from './CustomerPersonChangeForm'

    export default {
        name: 'CustomerChangeMain',
        components: { // 组件声明
            'customer-change-select-dialog': CustomerChangeSelectDialog,
            'customer-change-list': CustomerChangeList,
            'customer-corp-change-form': CustomerCorpChangeForm,
            'customer-person-change-form': CustomerPersonChangeForm,
        },
        data() {
            return {
                //默认展示页签
                activeName: 'firstTabPane',
                // 展示的界面(列表,卡片)
                showType: 'list',
                // 客户主键
                customerId: '',
                // 主表单据状态
                billStatus: '',
                // 整个表单页面否可编辑（审核中、审核通过不可编辑）
                editable: false,
                taskId: '',
                // 是否展示新增客户变更dialog
                showCustomerAddDialog: false,
                // 客户类型
                customerType: '',
            }
        },

        methods: {
            // 切换页签
            tabClick(val) {
                this.activeName = val.name
            },

            // 切换至卡片界面
            changeToDetail(val) {
                this.$nextTick(() => {
                    this.getTaskId(val.customerId)
                })
                this.customerId = val.customerId
                if (val.customerType.value) {
                    this.customerType = val.customerType.value
                } else {
                    this.customerType = val.customerType
                }
                if (val.billStatus.value) {
                    this.billStatus = val.billStatus.value
                } else {
                    this.billStatus = val.billStatus
                }
                if (this.billStatus === 'INITIAL') {
                    this.editable = true
                } else {
                    this.editable = false
                }
                this.showType = 'card'
            },

            // 切换至列表界面
            changeToList() {
                this.showType = 'list'
                this.customerId = ''
                this.$refs.customerChangeListRef.search()
            },

            // 新增项目立项
            addCustomerChange() {
                this.showCustomerAddDialog = true
                this.$refs.customerChangeSelectDialogRef.search();
            },
            closeDialog(val) {
                this.showCustomerAddDialog = val
            },
            getTaskId(val){
                this.$http.get('/joys-rest/lss-customer/custChange/get/taskId/' + val).then(
                    resp => {
                        this.taskId = resp.bodyText
                    },
                    resp => {
                        this.$message.error("获取任务id失败")
                    }
                )
            },
        }
    }

</script>
<style>
    .row-class {
        height: 50px;
        padding-left: 20px;
        font-size: 13px;
        background-color: #E4E8EB
    }

</style>
